<template>
  <div class="content">
    <h3>实现双向绑定</h3>
    输入内容：<input type="text" v-model="username" /><br>
    <p ref="p">{{ username }}</p>
    <input type="button" value="测试" @click="changeName()" />
    <div v-text="value"></div>
    <div v-html="value"></div>
  </div>
</template>
<script>
import { reactive, toRefs } from 'vue'
export default {
  setup () {
    const data = reactive({
      username: '初始值',
      age: 0,
      value: "<h3 style='color:red'>测试v-html插值语法</h3>",
      title: 'vue动态数据类型的提示信息',
      clsvalue: 'bg1',
      dataList: [
        {
          name: '张小明',
          age: 20,
          gender: '男',
          telephone: '1256365888'
        },
        {
          name: '赵丽',
          age: 20,
          gender: '女',
          telephone: '1256365888'
        },
        {
          name: '钱多多',
          age: 20,
          gender: '男',
          telephone: '1256365888'
        },
        {
          name: '孙晓',
          age: 20,
          gender: '女',
          telephone: '1256365888'
        }
      ]

    })
    const changeName = function () {
      // 需要使用到一个关键字this
      alert('函数定义在了组合api中')
    }
    return {
      ...toRefs(data),
      changeName
    }
  },
  methods: {

  }
}
</script>
<style>
.content {
  box-sizing: border-box;
  padding: 10px;
}

input {
  height: 30px;
  width: 160px;
  border: 1px solid black;
  border-radius: 5px;
}
</style>
